import { createStore } from "vuex"
import { mutationInfo } from "@/store/mutationType"
import module from './modules/module'
import counter from './modules/counter'
const store = createStore({
    // 状态存储数据
    state: () => ({
        counter: 100,
        name: "小染",
        age: 19,
        friend: [
            { id: 1, name: "小1", moeny: 100 },
            { id: 2, name: "小2", moeny: 200 },
            { id: 3, name: "小3", moeny: 300 }
        ],
        nameMutation: "爱丽丝",
        ageMutation: 20,
        moenyMutation: 1000,
        nameAction: "小染一号",
        counterAction: 99,
        // 服务器数据
        banners: [],
        recomands: []
    }),

    getters: {
        // 1.基本用法
        doublecounter(state) {
            return state.counter * 2
        },
        totalmoeny(state) {
            return state.friend.reduce((preValue, item) => {
                return preValue + item.moeny
            }, 0)
        },
        // 2.在该getters属性中获取其他getters
        message(state, getters) {
            return `name:${state.name} totalmoeny:${getters.totalmoeny}`
        },
        // 3.getters是可以返回一个函数的，调用这个函数可以传入参数
        getFriendById(state) {
            return function (id) {
                const friend = state.friend.find(item => item.id === id)
                return friend
            }
        },
    },
    // 更新数据在这
    mutations: {
        increate(state) {
            state.counter++,
                state.counterAction++
        },
        upmoeny(state) {
            state.moenyMutation++
        },
        changename(state, payload) {
            state.nameMutation = payload
            state.nameAction = payload
        },
        [mutationInfo](state, newInfo) {
            state.nameMutation = newInfo.name,
                state.ageMutation = newInfo.age
        },
        changeBanners(state, banner) {
            state.banners = banner
        },
        changeRecommends(state, recomand) {
            state.recomands = recomand
        }
    },
    actions: {
        increateAction(context) {
            context.commit("increate")
        },
        changenameAction(context, payload) {
            console.log("payload", payload);
            context.commit("changename", payload)
        },
        // 通过fetch发送网络请求 还没学promise ┭┮﹏┭┮
        fetchHomeMultiondataAction() {
            // 1.返回promise，给promise设置then
            // fetch("http://123.207.32.32:8000/home/multidata").then(res => {
            //     // return res.json()
            //     res.json().then(data => {
            //         console.log(data)
            //     })
            // }).then
            // 2.promise的链式调用
            fetch("http://123.207.32.32:8000/home/multidata").then(res => {
                return res.json()
            }).then(data => {
                console.log(data)
            })
        },
        // 3.await/async
        async fetchHomeMultiondataActionawait(context) {
            const res = await fetch("http://123.207.32.32:8000/home/multidata")
            const data = await res.json()
            console.log(data)
            context.commit("changeBanners", data.data.banner.list)
            context.commit("changeRecommends", data.data.recommend.list)
        }
    },
    modules: {
        modules: module,
        counters:counter
    }
})
export default store